<template>
  <div class="monaco-editor-wrapper">
    <div ref="monacoContainer"></div>
  </div>
</template>

<script>
import * as monaco from "monaco-editor";

export default {
  name: "MonacoEditor",
  props: {
    // 显示的代码数据
    codes: {
      type: String,
      default: "test",
    },
    // 代码是否可读
    readOnly: {
      type: Boolean,
      default: false,
    },
    language: {
      type: String,
      default: "html",
    },
    editorOptions: {
      type: Object,
      default() {
        return {
          selectOnLineNumbers: false,
          roundedSelection: false,
          // readOnly: this.readOnly,
          cursorStyle: "line",
          automaticLayout: false,
          glyphMargin: false,
          useTabStops: false,
          fontSize: 18,
          autoIndent: false,
        };
      },
    },
  },
  data() {
    return {
      themeOptions: [
        {
          label: "vs默认",
          value: "vs",
        },
        {
          label: "vs高亮",
          value: "hc-black",
        },
        {
          label: "vs深色",
          value: "vs-black",
        },
      ],
      theme: "vs",
      codesCopy: "",
      monacoEditor: null,
    };
  },
  computed: {
    monacoContainer() {
      const { monacoContainer } = this.$refs;
      return monacoContainer || null;
    },
  },
  mounted() {
    this.initEditor();
  },
  methods: {
    initEditor() {
      const ctx = this;
      // ctx.monacoContainer.innerHTML = "";
      ctx.monacoEditor = monaco.editor.create(ctx.monacoContainer, {
        value: self.codesCopy || self.codes,
        language: self.language,
        theme: self.theme,
        readOnly: self.readOnly,
        editorOptions: self.editorOptions,
        minimap: {
          enabled: false,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
